import { useSelector, useDispatch } from 'react-redux'
import { setTokenWallet } from '../redux/slices/balanceSlice'
import { fromWei } from '../utils'
import { Card, Col, Row, Statistic, Button } from 'antd';
import BalanceForm from './BalanceForm';
import { useState } from 'react';
export default function Balance() {
  const {
    TokenWallet,
    EtherWallet,
    TokenExchange,
    EtherExchange
  } = useSelector(state => state.balance)

  const [open, setOpen] = useState({
    value: false,
    title: '',
    type: 0
  })

  const showModal = (title, type) => {
    console.log(title);
    
    setOpen({
      value: true,
      title: title,
      type: type
    })
  }

  const hideModal = () => {
    setOpen({
      value: false
    })
  }
  
  return (
    <>
      <Row gutter={24}>
        <Col span={4}>
          <Card title="钱包中以太币" bordered={false} hoverable={true}>
            <Statistic
              value={fromWei(EtherWallet)}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={4}>
          <Card title="钱包中Min币" bordered={false} hoverable={true}>
            <Statistic
              value={fromWei(TokenWallet)}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="交易所中以太币" bordered={false} hoverable={true} extra={
            <>
              <Button type='primary' style={ {marginRight: 10} } onClick={ () => { showModal('充值Eth币',1) }}>充值</Button>
              <Button onClick={ () => { showModal('提现Eth币',2) }}>提现</Button>
            </>
          }>
            <Statistic
                value={fromWei(EtherExchange)}
                precision={2}
                valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="交易所中Min币" bordered={false} hoverable={true} extra={
            <>
              <Button type='primary' style={ {marginRight: 10} } onClick={ () => { showModal('充值Min币', 3) }}>充值</Button>
              <Button onClick={ () => { showModal('提现Min币', 4) }}>提现</Button>
            </>
          }>
            <Statistic
              value={fromWei(TokenExchange)}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
      </Row>
      <BalanceForm open={ open } hideModal={ hideModal }></BalanceForm>
    </>
  )
}